<template>
  <div class="list-cardlist-card">
    <div class="list-line">
      <div class="timebox" v-if="item.time">{{item.time.substr(0,10)}}</div>
      <div class="infobox">
        <div class="infoline">
          <div class="infoleft">
            <van-icon class="list-card-icon" name="bookmark-o" />
            <label class="bookname" v-if="item.srfmajortext">{{item.srfmajortext}}</label>
          </div>
          <div class="inforight">
            <van-icon icon-rigth name="arrow" />
          </div>
        </div>
        <div class="list-hr"></div>
        <div class="infoline">
          <div class="booktypebox">
            <div >
              <p class="type-p">副标题</p>
            </div>
            <p class="typeinfo" v-if="item.subtitle">{{item.subtitle}}</p>
          </div>
          <div>
            <p class="type-p">数量</p>
            <p class="typeinfo" v-if="item.num">{{item.num}}</p>
          </div>
          <div>
            <p class="type-p">内容</p>
            <p class="typeinfo" v-if="item.content">{{item.content}}</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";

@Component({
  components: {}
})
export default class AppCardList extends Vue{
  
  /**
   * 传入item
   *
   * @type {any}
   * @memberof AppCardList
   */
  @Prop() public item?: any;

};
</script>
<style>
.list-card{
  background-color: white;
}
.timebox {
  padding-bottom: 1em;
  text-align: left;
  color: #969799;
  margin-left: 1.6em;
}
.infoleft {
  position: relative;
}
.list-card-icon {
  position: relative;
  color: #87c2ff;
  font-size: 1.3em;
  top: 0.2em;
  padding: 0 0.2em 0 0;
}
.list-line {
  padding-bottom: 1em;
}
.infobox {
  padding: 1em 0 0 0;
  margin: 0 1.6em;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infoline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}
.icon-rigth {
  color: #26a2ff;
  border-radius: 50%;
  border: #26a2ff solid 0.0625em;
  padding: 0.3em;
}

.bookname {
  font-size: 1em;
  font-weight: 500;
  color: #5f5f5f;
}
.booknum {
  font-size: 1em;
  color: rgb(58, 58, 58);
}
.typeinfo {
  color: #333;
}
.type-p {
  font-size: 0.9em;
  color: #666;
}
.list-hr {
    display: block;
    height: 1px;
    margin: 1em 1.5em 0.1em 1.5em;
    border-bottom: #cccccc solid 0.0625em;
}
i.van-icon.van-icon-arrow {
    color: #26a2ff;
}
.inforight {
    width: 22px;
    height: 22px;
    border: solid 1px #26a2ff;
    border-radius: 50%;
    line-height: 28px;
}
</style>